<template>
  <div class="userstore-wrap">
    <van-nav-bar title="我的储值" left-arrow @click-left="onClickLeft" />
    <div class="ye_wrap">
      <div class="ye_radius one" @click="toBlance">
        <div class="div-wrap">
          <div class="div-left">
            <h4>当前店铺余额(元)</h4>
            <h3>0.00</h3>
          </div>
          <div class="div-right">
            <van-icon name="arrow" />
          </div>
        </div>
      </div>
    </div>
    <div class="ye_wrap">
      <div class="ye_radius">
        <div class="div-wrap">
          <div class="div-left">
            <h4>礼品卡(元)</h4>
            <h3>0.00</h3>
          </div>
          <div class="div-right">
            绑定新卡
            <van-icon name="arrow" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { NavBar } from "vant";
import { Icon } from "vant";

Vue.use(Icon);
Vue.use(NavBar);
export default {
  methods: {
    toBlance(){
      this.$router.push('/userBlance')
    },
    // 返回上一页
    onClickLeft() {
      this.$router.go(-1);
    }
  }
};
</script>

<style lang="stylus" scoped>
.userstore-wrap {
  height: 100%;
  background-color: #f9f9f9;

  .div-wrap {
    padding: 0.2rem;
    display: flex;
    align-items: center;

    h3, h4 {
      font-weight: normal;
    }

    h3 {
      font-size: 0.25rem;
    }

    .div-left {
      flex: 1;
    }

    .div-right {
      width: 1rem;
      text-align: right;
      color: #646566;

      i {
        vertical-align: -0.02rem;
      }
    }
  }

  .one {
    background-color: #d4b747;
    color: #fff !important;

    i {
      color: #fff !important;
    }
  }

  .van-nav-bar >>> .van-icon {
    color: #0f0f0f !important;
  }
}
</style>